<template>
  <el-container>
    <el-header style="height: 41px;padding: 0;">
      <!-- <el-card class="box-card" body-style="padding:0">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;font-size:17px;">请假单号：{{this.taskInformationData.applyCode}}</span>
          <span style="margin-left: 20px;font-weight: bold;font-size:17px;">当前审批人：{{this.approveListData[0].activityUserName}}</span><span style="font-weight: bold;font-size:17px;margin-left: 20px;">申请时间：{{this.taskInformationData.applyDate}}</span>
          <el-button type="text" style="float: right;" @click="goBack"><i class="el-icon-close" style="font-size: 17px;"></i></el-button>
        </div>
      </el-card> -->
      <div style="padding-left:10px;line-height: 41px;">
        <span style="font-weight: bold;font-size:16px;">请假单号：{{this.taskInformationData.applyCode}}</span>
        <span style="margin-left: 20px;font-weight: bold;font-size:16px;">当前审批人：{{this.approveListData[0].activityUserName}}</span><span
          style="font-weight: bold;font-size:16px;margin-left: 20px;">申请时间：{{this.taskInformationData.applyDate}}</span>
        <el-button type="text" style="float: right;" @click="goBack"><i class="el-icon-close" style="font-size: 16px;"></i></el-button>
      </div>
    </el-header>
    <el-container style="overflow: hidden;">
      <el-main class="el-box" style="padding: 10px 10px 0 0;">
        <el-card class="box-card el-card-flex el-flex">
          <div slot="header" class="clearfix">
            <span>流程监控</span>
          </div>
          <processMonitorChart :childInstanceId="this.taskInformationData.instanceId"></processMonitorChart>
        </el-card>
      </el-main>
      <el-aside width="390px" class="el-box-column" style='padding: 10px 0 0 0;'>
        <el-card class="el-flex el-card-flex">
          <div slot="header" class="clearfix">
            <span style="color: #409EFF;font-weight: bold;">审批记录</span>
          </div>
          <div class="block" style="padding: 10px 0 0 15px; overflow: auto;">
            <approvalHistory :approveListData="approveListData"></approvalHistory>
          </div>
        </el-card>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script>
  import {
    Tree,
    Dialog,
    MessageBox,
    Message,
    TabPane,
    Table,
    TableColumn,
    Timeline,
    TimelineItem,
    Tag
  } from 'element-ui';
  import {
    workflowApprovalHistory
  } from '@/api/affairs/leave/leaveApprove.js'
  import processMonitorChart from '@/views/workflow/processMonitorChart/processMonitorChart';
  import approvalHistory from '@/views/workflow/approvalHistory/approvalHistory';
  export default {
    name: 'processMonitor',
    components: {
      //注册插件
      'el-tree': Tree, //树形菜单
      'el-dialog': Dialog, //弹窗
      'el-tab-pane': TabPane, //导航
      'el-table': Table, //表格
      'el-table-column': TableColumn, //表格列
      'el-timeline-item': TimelineItem, //时间轴
      'el-timeline': Timeline, //时间轴
      'el-tag': Tag,
      processMonitorChart, //工作流程图组件
      approvalHistory //工作流时间轴
    },
    data() {
      return {
        taskInformationData: {
          applyCode: "",
        },
        approveListData: [{
          activityUserName: ""
        }], //审批记录初始化数据源
        search: '',
        activeName: 'first',
        dialogVisible: false,
        editForm: {},
        textarea: "", //文本域初始化数据
      };
    },
    created() {
      if (this.$route.params.instanceId == null) {
        this.$router.go(-1)
      } else {
        this.taskInformationData = this.$route.params //接收动态路由参数
        this.approveData()
      }
    },
    methods: {
      handleClick(tab, event) {},
      approveData() { //审批记录数据
        if (this.taskInformationData.instanceId == null) {
          this.approveListData = []
        } else {
          // this.axios.get('/workFlow/getApprovalHistory?instanceId=' + this.taskInformationData.instanceId)
           let data = {
            'instanceId': this.taskInformationData.instanceId,
            'page': 0,
            'pageSize': 0
          }
          workflowApprovalHistory(data).then(res => {
            if (res.data.code == 10000) {
              this.approveListData = res.data.data.records
            }
          })
        }
      },
      goBack() {
        this.$router.go(-1)
      }
    }
  };
</script>
